
<template>
  <el-container class="container">
    <div class="echartBox" ref="echartId" id="echartbox">
      <el-dialog
        title="请上传需要分析的流水表格"
        :visible.sync="dialogVisible"
        width="30%"
        >
        <el-upload
          multiple:true
          class="upload-analysis"
          :on-preview="handlePreview"
          drag
          :file-list="fileList"
          :on-change="handleSuccess"
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">请上传xlsx或者xls类型的文件，支持多个上传</div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="uploadExcel()">确认上传</el-button>
        </span>
      </el-dialog>
      <el-main class="midbox" style="display: flex">
        <div id="inchartbox">
          <div class="inbox">
             <HelloWorld ref="HelloWorld" v-show="maptype.bar"></HelloWorld>
              <heatmap ref="heatmap" v-show="maptype.heatmap"></heatmap>
              <pie ref="pie" v-show="maptype.pie"></pie>
              <typeline ref="typeline" v-show="maptype.typeline"></typeline>
          </div>
         
        </div>
        <div class="mid-bottombox">
          <div class="picbox">
            <div class="showpic">
              <!-- <div>图形展示</div> -->
            </div>
            <div class="picelement"  @click="changeMaptype('heatmap')" >
              <img src="../pic/heatmap.png">
              <div style="color: #29b6f6;">热力图</div>
            </div>
            <div class="picelement" @click="changeMaptype('pie')">
              <img src="../pic/pie.png">
              <div style="color: #29b6f6;">饼图</div>
            </div >
            <!-- <div class="picelement" @click="changeMaptype('bar')" >
              <img src="../pic/bar.png">
              <div style="color: #29b6f6;">柱状图</div>
            </div> -->
            <div class="picelement" @click="changeMaptype('typeline')">
              <img src="../pic/relationship.png">
              <div style="color: #29b6f6;">收支曲线</div>
            </div>
          </div>
          <div class="timeselectbox">
            <div class="picelementsmall"  @click="showReport()" >
              <img src="../pic/report.png">
              <div style="color: #29b6f6;">查看报告</div>
            </div>
            <div class="picelementsmall" @click="saveReport()">
              <img src="../pic/download.png">
              <div style="color: #29b6f6;">保存报告</div>
            </div >

          </div>
        </div>
      </el-main>
      <el-aside  class="rightside" width="30%" style="display: flex;flex-direction: column">
        <div class="rightsideAI">
          <aitalk ref="aitalk">

          </aitalk>
          <div class="loading" v-show="aithinking">
                 <img class="sendqs" src="../pic/deepseek1.png" >
                 <div style="font-size: 25px;color:#29b6f6;font-weight: 700;">{{ thinking }}</div>
          </div>

        </div>
        <div class="userbox">
          <div class="rightsiderUSER">
            <el-input class="userinput" type="textarea" v-model='inputtext'  resize="none" style="font-size: 20px;">

            </el-input>
          </div>
          <div class="buttonbox">
            <!-- <img class="sendqs" src="../pic/deepseek1.png" @click="sendqs"> -->
            <el-button type="primary" style="height: 100%;width: 100%;" @click="sendqs">提问</el-button>
          </div>
        </div>
      </el-aside>
      <el-dialog
        title="流水分析报告AI"
        :visible.sync="showreport"
        width="60%"
        >
        <v-md-editor v-model="reportArea" height="800px"></v-md-editor>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="rewritereport()">确认修改</el-button>
          <el-button type="danger" @click="canclerewrtie">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </el-container>
</template>
 
<script>
import * as XLSX from 'xlsx';
import aitalk from "../components/aitalk.vue"
import heatmap from "../components/heatmap.vue"
import pie from "../components/pie.vue"
import typeline from "../components/typeline.vue"
import axios from 'axios';
import qs from 'qs'
import { saveAs } from 'file-saver';
import MarkdownIt from "markdown-it";
import { saveToMarkdownFileAndDownload } from "@/tool/tool.js";
export default {
  components:{aitalk,heatmap,pie,typeline},
  data() {
    return {
        thinking:"ai生成图形中...",
        totalData:{},
        md:new MarkdownIt(),
        showreport:false,
        inputtext:"",
        maptype:{
          bar:true,
          heatmap:true,
          pie:true,
          typeline:true
        },
        activeIndex:{

        },
        reportArea:"啊实打实大师大大撒打算",
        newQuestion:"",
        aithinking:false,
        dialogVisible:true,
        reportAreatmp:"",
        fileList:[],
      }
    
  },
  mounted() {
    this.$nextTick(() => {
      for( let key in this.maptype){
        this.maptype[key]=false
      }
      // this.maptype.heat = true;
    });
     
  },
  methods: {
    renderMarkdown(){
      return this.md.render(this.reportArea);
    },
    async handleSuccess(file, fileList){
      this.fileList = fileList;
      // saveAs(new Blob([file]), file.name);
      // console.log(file.raw,11111111111111111111)
      // var fd = new FormData();
      // fd.append('file', file.raw);

      // console.log(fd)
      // await axios.post('http://127.0.0.1:8070/uploadExcel', file.raw)
      // .then(response => {
      //     console.log('成功:', response.data);
      // })
      // .catch(error => {
      //     console.error('错误:', error.message);
      // });
    },
    canclerewrtie(){
      this.showreport = false;

    },
    saveReport(){
      this.$refs.aitalk.downFile()
      saveToMarkdownFileAndDownload(this.reportArea, "report.md");
    },
    showReport(){
      console.log(this.dialogVisible)  
      if(this.dialogVisible == false && this.fileList.length == 0)
      {
          this.dialogVisible = true
          console.log(this.dialogVisible)
          this.reportAreatmp = this.reportArea;
      }
      else {
        this.showreport = true;
      }
    },
    async datatoServe(data){
      let that = this;
      await axios.post('http://127.0.0.1:8070/dataclearer', data)
      .then(response => {
          console.log('成功:', response.data);
          // this.aithinking = false;
          this.totalData = response.data;
      })
      .catch(error => {
          console.error('错误:', error.message);
      });
      this.thinking = "ai生成报告中...";
 
      await axios.post('http://127.0.0.1:8070/uploadExcel', data)
      .then(response => {
          console.log('成功:', response.data);
          this.aithinking = false;
          this.reportArea = response.data;
          this.thinking = "ai思考...";
      })
      .catch(error => {
          console.error('错误:', error.message);
      });
      
    },
    uploadExcel(){
      if (this.fileList.length === 0) {
        alert('请选择要上传的文件');
        return;
      }
      this.dialogVisible = false;
      this.aithinking = true;
      // const reader = new FileReader();
      //   reader.readAsArrayBuffer(this.fileList[0].raw);
      //   reader.onload = e => {
      //       // 读取成功
      //       console.log(e)
      //   }
      const reader = new FileReader();
      reader.onload = (e) => {
          const data = new Uint8Array(e.target.result);
          const workbook = XLSX.read(data, { type: 'array' });
          const sheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[sheetName];
          const jsonData = XLSX.utils.sheet_to_json(worksheet);
          // 发送数据到后端
          // this.sendDataToBackend(jsonData);
          console.log(jsonData)
          this.datatoServe(jsonData)
        };
        reader.readAsArrayBuffer(this.fileList[0].raw);
        
    },
    handlePreview(file){
      
    },
    abc(){
      
    },
    async sendqs() {
      this.$refs.aitalk.dialog.push({
                role:"user",
                content:this.inputtext
      })
      
      var aitalk = this.$refs.aitalk
      console.log(this.$refs.aitalk.dialog)
      var text = this.inputtext;
      this.inputtext = "";
      this.aithinking = true;
      var that = this;
      that.$refs.aitalk.toBottom();
      var data = {
        data: text
      };
      await axios.post('http://127.0.0.1:8070/chat', data)
      .then(response => {
          console.log('成功:', response.data);
          aitalk.dialog.push({
            role:"ai",
            content:response.data.message
          });
          that.aithinking = false;
          that.$refs.aitalk.toBottom();
      })
      .catch(error => {
          console.error('错误:', error.message);
      });

    },
    readXLSXFile(file) {
      console.log()
      const reader = new FileReader();
        reader.readAsArrayBuffer(file.raw);
        reader.onload = e => {
            // 读取成功
        }
    },
    show(){
      this.isVisible=false
    },
    changeMaptype(type){
      for( let key in this.maptype){
        this.maptype[key]=false
      }
      this.maptype[type] = true;
      console.log(type)
      if(type == "typeline")
      {
        setTimeout(() => {
          this.$refs.typeline.updateChart(this.totalData)
      }, 300);
      }
      if(type == "heatmap")
      {
        setTimeout(() => {
          this.$refs.heatmap.updateChart(this.totalData)
        }, 300);
      }
      if(type == "pie")
      {
        setTimeout(() => {
          this.$refs.pie.updateChart(this.totalData)
        }, 300);
      }
   
    }
   
  }
}
</script>
<style>
.inbox {
  width: 6000px;
  height: auto;
}
.container {
  background: linear-gradient(60deg, rgb(0,117,181) ,30%, rgb(187,220,241) 50%);
  height: 1300px;
  width: 100%;
  box-sizing: border-box;
  padding: 120px 120px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #F6F6F2;
}

.leftside{ 
  width: 20%;
  margin: 50px 50px ;
  margin-right: 20px;
  border-radius: 25px;
  background-color:rgb(236, 246, 255);
  transition: box-shadow 500ms, transform 0.2s ease-in-out;
}
.leftside:hover {
  box-shadow: 10px 10px 10px -1px rgba(0, 0, 0, 0.3);
  transform: translate(-5px, -5px);
}
.rightside{
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-radius: 25px;
  padding:20px 20px;
  margin: 50px 50px ;
  background-color:rgb(236, 246, 255);
  margin-left: 10px;
  transition: box-shadow 500ms, transform 0.2s ease-in-out;
}
/* .rightside:hover {
  box-shadow: 10px 10px 10px -1px rgba(0, 0, 0, 0.3);
  transform: translate(-5px, -5px);
} */
.rightsideAI {
  box-sizing: border-box;
  height: 90%;
  width: 100%;
  background-color: white;
  border-radius: 25px;
}
.rightsiderUSER{
  box-sizing: border-box;
  flex:1;
  width: 100%;
  background-color: white;
  border-radius: 25px;
}
.echartBox {
  display: flex;
  width: 100%;
  height: 100%
}

.midbox {
  box-sizing: border-box;
  padding: 20px 20px;
  margin: 30px 0;
  border-radius: 25px;
  /* background-color:rgb(255, 255, 240); */
  display: flex;
  flex-direction: column;
  
}
/* #是id .是类 */
#inchartbox {
  box-sizing: border-box;
  /* width: 100%; */
  height: 80%;
  display:flex;
  flex-direction: row;
  border-radius: 25px;
  /* background-color:rgb(255, 255, 240); */
  background-color:rgb(236, 246, 255);
  padding: 60px 30px;
  overflow: hidden;
}

.mid-bottombox{
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  margin-top: 20px;
  flex:1;
  height: 0;
  border-radius: 25px;
  /* background-color:rgb(255, 255, 240); */
 
  transition: box-shadow 500ms, transform 0.2s ease-in-out;
  justify-content: space-between;
}
/* .mid-bottombox:hover {
  box-shadow: 10px 10px 10px -1px rgba(0, 0, 0, 0.3);
  transform: translate(-5px, -5px);
} */
.picbox {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
  width: 65%;
  padding: 20px 20px;
  border-radius: 20px;
  margin-right: 10px;
  background-color:rgb(236, 246, 255);
}
.showpic {
  box-sizing: border-box;
  position: absolute;
  height: 181px;
  translate: -33% -11.8%;
  width: 60px;
  height: 172px;
  background-color: #d6eaf7;
  border-radius: 20px 0px 0px 20px;
  writing-mode: vertical-lr;
  text-orientation: upright; 
  font-size:20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 800;
  color: #0276b6;
  letter-spacing: 15px;
}
.picelement {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  height: 100%;
  width: 26%;
  border-radius: 20px;
  padding: 10px 70px;
  transition: box-shadow 500ms, transform 0.2s ease-in-out;
}
.picelement:hover {
  box-shadow: 5px 10px 5px 5px rgba(68, 200, 240, 0.3);
  transform: translate(-2px, -2px);
}
img {
  height: 100%;
  width: 100%;
  transition: box-shadow 500ms, transform 0.2s ease-in-out;
}

.timeselectbox {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  box-sizing: border-box;
  height: 100%;
  width:32%;
  background-color:rgb(236, 246, 255);
  border-radius: 25px;
  padding: 15px 5px;
}
.el-menu-item {
  background-color:rgb(236, 246, 255);
  width: 100%;
}
.userbox {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 9%;
  margin-top: 30px;
}
.sendqs {
  height: 40px;
  width: 40px;
}
.buttonbox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20px;
  height: 80px;

}
.imgbox:hover {
  animation: jello-horizontal 1.1s infinite;
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            translate: (0, 100px)
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.userinput {
  width: 100%;
  height: 100%;
  font-size:20px;
}
.el-textarea__inner {
  width: 100%;
  height: 100%;
  border-radius: 15px;

}
.loading {
  position: absolute;
  top:13.6%;
  left: 66%;
  width: 687px;
  height: 960px;
  border-radius: 25px;
  background-color: #29b5f621;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.loading img {
    width: 150px;
    height: 150px;
    animation: jello-horizontal 1.1s infinite;
}
.picelementsmall {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  height: 100%;
  width: 200px;
  border-radius: 20px;
  padding: 10px 50px;
 transition: box-shadow 500ms, transform 0.2s ease-in-out;
}
.picelementsmall:hover {
  box-shadow: 5px 10px 5px 5px rgba(68, 200, 240, 0.3);
  transform: translate(-2px, -2px);
}
</style>
